<!--
 * @Author: zjf
 * @Date: 2023-11-28 21:21:25
 * @LastEditors: zjf
 * @LastEditTime: 2023-12-16 19:57:13
 * @Description: 进度信息
-->
<template>
  <div class="l-rblock l-form-viewer" style="padding:10px 20px 0px 20px">
    <div class="l-auto-window" :class="{'only-tabs':onlyProgress}">
      <el-tabs v-model="activeName" type="card">
        <template v-if="!onlyProgress">
          <el-tab-pane class="l-tabs-container" :label="$t('基本信息')" name="tab0">
            <el-form :model="formData" :rules="rules" size="mini" labelPosition="top" labelWidth="110px" ref="form">
              <l-custom-form ref="CustomForm" :disabled="disabled" :columns="columns"></l-custom-form>
            </el-form>
          </el-tab-pane>
        </template>
        <el-tab-pane class="l-tabs-container" :label="$t('施工阶段进展')" name="tab1">
          <l-table-edit ref="TableEdit" :tableColumns="progressTableColumns" :tableData="progressTableData"
            @table="tableFunc"></l-table-edit>
        </el-tab-pane>
        <el-tab-pane v-if="false" class="l-tabs-container" :label="$t('电子档案')" name="tab2">
          <l-file-management v-if="activeName == 'tab2' && projectId" :projectID="projectId"
            :dirTableName="'plan_info'"></l-file-management>
        </el-tab-pane>
      </el-tabs>
      <div class="tab-btn">
        <el-button size="small" @click="handleClose">关闭</el-button>
        <template v-if="activeName == 'tab0' && !disabled">
          <el-button size="small" type="primary" @click="handleSave()">提交 </el-button>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import { formColmuns, progressColumns } from "./columns";
export default {
  components: {
  },
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    onlyProgress: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      fromEditing: false,
      activeName: 'tab0',
      projectId: "",
      formData: {
        projectName: "",            // 项目名称
        constructionEntity: "",     // 建设单位
        projectYear: "",            // 项目所在年度
        projectTypeId: "",            // 工程类别

        statDate: "",               // 统计时间
        yearlyImageProgress: "",    // 年度形象进度
        projectPhase: "",           // 项目总体阶段
        projectProgress: "",        // 项目总体进展
        currentImageProgress: "",   // 当前形象进度
        projectProgressCons: "",    // 施工总体进展
      },
      rules: {

      },
      columns: formColmuns,
      progressId: "", // 进度id

      // 施工阶段进展 table edit
      progressTableData: [],
      progressTableColumns: progressColumns,
      progressTableField: {
        statDate: "",
        constructionPhaseId: "",
        isHavePhase: true,
        constructionProgress: "",
        isEditing: true,
      },

    };
  },
  computed: {
  },
  mounted() {
    this.init()

  },
  methods: {
    init() {
            if (this.$refs.CustomForm) {
        this.$refs.CustomForm.formData = this.formData
      }
    },

    // 重置表单
    resetForm() {
      this.$formClear(this.$refs.form)
      this.activeName = 'tab0'
      Object.assign(this.$data, this.$options.data())
      if (this.$refs.CustomForm) {
        this.$refs.CustomForm.formData = {}
      }
    },
    // 校验表单
    async validateForm() {
      if (!await this.$formValidateWraper(this.$refs.form)) {
        return false
      }
      return true
    },

    // 获取当前表单数据
    getForm() {
      this.formData = this.$refs.CustomForm.formData
      return {
        projectId: this.projectId,
        ...this.formData
      }
    },
    /** 加载项目信息   初始化表单 */
    async loadFormData(projectId) {
      this.projectId = projectId
      this.getProgressTableData()
      this.fromEditing = true
      // 获取项目信息
      const projectApi = window.$crud("project");
      const projectData = await this.$awaitWraper(projectApi.get(projectId))
      // 获取项目进度列表
      const progressApi = window.$crud("project/progress/list");
      const progressList = await this.$awaitWraper(progressApi.getInfo({ projectId: projectId })) || []
      // 获取第一条进度信息
      const progressInfo = progressList[0] ?? {}
      this.progressId = progressInfo.id || ""

      if (projectData) {
        // 项目信息
        for (const key in this.formData) {
          this.formData[key] = projectData[key] || "";
          if (progressInfo[key]) {
            this.formData[key] = progressInfo[key] || "";
          }
        }
                if(this.$refs.CustomForm){
          this.$refs.CustomForm.formData = this.formData
        }
      }

    },

    /** 关闭表单 */
    handleClose() {
      this.$emit('close')
    },
    /** 提交 保存 事件 */
    async handleSave() {
      if (await this.validateForm()) {
        const res = await this.saveForm()
        if (res) {
          this.$message({
            type: 'success',
            message: '提交成功'
          })
          this.$emit('refresh')
        }
      }
    },
    /** 保存表单数据 */
    async saveForm() {
      let postData = this.getForm()
      if (this.progressId) {
        // 编辑
        const api = window.$crud("project/progress");
        return await this.$awaitWraper(api.update(this.progressId, postData))
      } else { // 新增
        const api = window.$crud("project/progress/info");
        return await this.$awaitWraper(api.add(postData))
      }
    },



    //#region 施工阶段进展
    /** 获取施工阶段信息 */
    async getProgressTableData() {
      const api = window.$crud("project/construction/progress/list");
      const data = await this.$awaitWraper(api.getInfo({ projectId: this.projectId }));
      this.progressTableData = []
      if (data.length) {
        this.progressTableData = data.map(t => {
          return {
            ...t,
            isEditing: false,
          }
        });
      }
    },

    tableFunc(res) {
      switch (res.type) {
        case 'save':
          this.handleSavetProgress(res.data)
          break;
        case 'delete':
          this.handleDeletetProgress(res)
          break;
        case 'push':
          this.progressTableData.push(this.progressTableField);
          break;
        default:
          break;
      }
    },
    /** 删除 */
    handleDeletetProgress(scope) {
      var index = this.progressTableData.indexOf(scope.data)
      this.$confirm(this.$t('是否删除该条数据?'), this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(async () => {
        if (scope.data.id) {
          const api = window.$crud("project/construction/progress");
          await api.remove(scope.data.id)
        }
        this.$message({
          type: 'success',
          message: this.$t('删除成功!')
        })
        this.progressTableData.splice(index, 1);

      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('已取消删除!')
        })
      })
    },
    /** 保存 */
    async handleSavetProgress(data) {
      var res = null
      data.projectId = this.projectId
      if (data.id) {
        // 编辑
        res = await this.$awaitWraper(window.$crud('project/construction/progress').update(data.id, data));
      } else {
        // 新增
        res = await this.$awaitWraper(window.$crud('project/construction/progress/info').add(data));
      }
      if (res) {
        this.$refs.TableEdit.handleCloseEdit(data) // 表格 关闭编辑
        this.$message({
          type: "success",
          message: '保存成功',
        });
      }
    },
    //#endregion



  }
}
</script>
<style lang="scss" scoped>
.l-auto-window {
  height: calc(100% - 50px);
}
.tab-btn {
  position: absolute;
  bottom: -40px;
  right: 0px;
}
.l-tabs-container {
  padding-top: 16px !important;
}
</style>